<!--
 * @Descripttion: 
 * @Version: 1.0
 * @Author: wcl
 * @Date: 2023-11-23 16:06:10
 * @LastEditors: wcl
 * @LastEditTime: 2023-11-24 10:39:54
-->
<template>
  <div>
    <a-drawer
      v-model:open="modalOpen"
      :title="moduleTitle"
      width="60%"
      placement="right"
    >
      <template #extra>
        <a-space wrap>
          <a-button type="primary" @click="handelOpen('新增示例图', {}, null)"
            >新建</a-button
          >
          <a-button type="primary" danger @click="modalOpen = false"
            >关闭</a-button
          >
        </a-space>
      </template>
      <a-card>
        <a-table
          :dataSource="dataSource"
          :columns="exampleColumns"
          :pagination="false"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.key === 'exampleImg'">
              <a-image :src="record.exampleImg" style="width: 100px"></a-image>
            </template>
            <template v-if="column.key === 'operate'">
              <a-space>
                <a-button
                  type="primary"
                  @click="handelOpen('编辑示例图', record, index)"
                  >编辑</a-button
                >
                <a-popconfirm
                  title="您是否要删除此条数据?"
                  ok-text="是"
                  cancel-text="否"
                  @confirm="handleDel(record)"
                >
                  <a-button danger type="primary">删除</a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-drawer>
    <addSample
      ref="addSampleRef"
      v-if="show"
      :titles="title"
      :list="list"
      :index="indexs"
      @refresh="refresh"
      @closeModal="closeModal"
    />
  </div>
</template>
<script setup>
import { ref } from "vue";
import { exampleColumns } from "../../columns.js";
import addSample from "./addSample.vue";
import { catalogSave } from "@/api/goodConfig.js";
import { message } from "ant-design-vue";
const modalOpen = ref(false);
const moduleTitle = ref("示例图管理");
const formData = ref({});
const addSampleRef = ref(null);
const dataSource = ref([]);
const open = (row) => {
  formData.value = row;
  dataSource.value = formData.value.sampleGraph
    ? JSON.parse(formData.value.sampleGraph)
    : [];
  modalOpen.value = true;
};
const list = ref({});
const indexs = ref("");
const show = ref(false);
const title = ref("");
const handelOpen = (titles, record, index) => {
  title.value = titles;
  list.value = record;
  indexs.value = index;
  show.value = true;
  // addSampleRef.value.open(titles, JSON.parse(JSON.stringify(record)), index);
};
const emits = defineEmits(["refreshList"]);
function handleDel(record) {
  const filerData = dataSource.value.filter(
    (val) => val.label !== record.label
  );
  dataSource.value = filerData;
  formData.value.sampleGraph = JSON.stringify(dataSource.value);
  handleCatalogSave();
}
function handleCatalogSave() {
  catalogSave(formData.value).then((result) => {
    if (result.code === 200) {
      message.success("操作成功");
      emits("refreshList");
    }
  });
}
function closeModal() {
  show.value = false;
}
function refresh(datas, changeIndex) {
  if (changeIndex === null) {
    dataSource.value.push(datas);
  } else {
    dataSource.value = JSON.parse(JSON.stringify(dataSource.value)).map(
      (item, index) => {
        if (index === changeIndex) {
          item = datas;
        }
        return item;
      }
    );
  }
  show.value = false;
  formData.value.sampleGraph = JSON.stringify(dataSource.value);
  handleCatalogSave();
}
defineExpose({ open });
</script>
